<template>
    <div class="console">
        <!-- <div class="search-table-header">
          <Form ref="searchForm" :label-width="labelWidth" class="search-table-form">
            <Row type="flex" :justify="searchColumn.length % 3 === 0 ? 'end' : 'start'" :gutter="24">
              <Col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item, index) in searchColumn" v-if="!folder && index < 2 || folder" :key="index">
                <FormItem :label="item.label + '：'">
                  <Input :name="item.key" v-if="item.type === 'input'" v-model="item.key" :placeholder="item.placeholder"></Input>
                  <Select :name="item.key" v-else-if="item.type === 'select'" v-model="form.name" :placeholder="item.placeholder">
                    <Option v-for="val in item.options" :value="val.value" :key="val.value">{{val.label}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :xs="24" :sm="24" :md="12" :lg="(searchColumn.length % 3 === 1 && folder) ? 16 : 8" :xl="(searchColumn.length % 3 === 1 && folder) ? 16 : 8">
                <FormItem style="text-align: right;">
                    <Button type="primary" @click="handleSearch" class="mr-8">查询</Button>
                    <Button @click="handleResetSearch" class="mr-8">重置</Button>
                    <a class="ml-8" style="font-size: 14px;" v-if="folder" @click="handleFolder">收起 <i class="ivu-icon ivu-icon-ios-arrow-up"></i></a>
                    <a class="ml-8" style="font-size: 14px;" v-else @click="handleFolder">展开 <i class="ivu-icon ivu-icon-ios-arrow-down"></i></a>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div> -->
        <Table border :columns="columns12" :data="dataList.rows">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
        </Table>
        <div class="page">
          <Page
            :total="dataList.total"
            :current="dataList.pageNum"
            :page-size="dataList.pageSize"
            @on-change="pageChange"
          />
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'dashboard-console',
        data () {
            return {
                columns12: [
                    {
                        title: 'personId',
                        key: 'personId',
                        width: 200
                    },
                    {
                        title: 'did',
                        key: 'did'
                    },
                    {
                        title: 'publicKey',
                        key: 'publicKey'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime',
                        width: 180,
                        render: (h, params) => {
                            const row = params.row
                            return h(
                                'span',
                                this.dateFormat(row.updateTime)
                            )
                        }
                    }
                ],
                dataList: {
                    rows: [],
                    total: 0,
                    pageNum: 1,
                    pageSize: 5
                },
                labelWidth: 100,
                searchColumn: [
                    {
                        label: '名称',
                        type: 'input',
                        key: 'name',
                        placeholder: '请输入名称'
                    },
                    {
                        label: '号码',
                        type: 'input',
                        key: 'phone',
                        placeholder: '请输入号码'
                    },
                    {
                        label: '状态',
                        type: 'select',
                        key: 'status',
                        placeholder: '请选择状态',
                        options: [
                            {
                                label: '成功',
                                value: '1'
                            },
                            {
                                label: '失败',
                                value: '0'
                            }
                        ]
                    },
                    {
                        label: '号码',
                        type: 'input',
                        key: 'phone',
                        placeholder: '请输入号码'
                    },
                    {
                        label: '号码',
                        type: 'input',
                        key: 'phone',
                        placeholder: '请输入号码'
                    },
                    {
                        label: '号码',
                        type: 'input',
                        key: 'phone',
                        placeholder: '请输入号码'
                    }
                ],
                folder: false,
                form: {
                    name: ''
                }
            }
        },
        methods: {
            ...mapActions('admin/account', ['getDidList']),
            /**
             * @description
             *
             */
            getDidListFun () {
                const page = this.dataList.pageNum - 1
                const size = this.dataList.pageSize
                this.getDidList({
                    page,
                    size
                }).then(resp => {
                    this.dataList.rows = resp.result.content
                    this.dataList.total = resp.result.totalElements
                })
            },
            pageChange (page) {
                this.dataList.pageNum = page
                this.getDidListFun()
            },
            /**
             * 查询
             */
            handleSearch () {
                console.log(this.$refs['searchForm']);
            },
            /**
             * 重置
             */
            handleResetSearch () {

            },
            /**
             * 展开/收起
             */
            handleFolder () {
                this.folder = !this.folder;
            },
            dateFormat: function (tick) {
                return this.$moment(tick).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        mounted () {
            this.getDidListFun()
        }
    }
</script>
<style lang="less" scoped>
.console{
      background: #fff;
    border-radius: 4px;
    padding: 14px;
}
</style>
